<template>
  <el-container>
    <el-aside>
      <el-form style="margin-left: 10px">
        <h3>文件信息</h3>
        <el-form-item label="文件名">
          <el-input v-model="fileInfo.fileName" :readonly="true"></el-input>
        </el-form-item>
        <h3  v-if="versionInfo.version != null">版本信息</h3>
        <el-form-item label="版本号"  v-if="versionInfo.version != null">
          <el-input v-model="versionInfo.version" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-tag v-for="tag in fileInfo.tagList">{{tag.tagName}}</el-tag>
        </el-form-item>
        <el-form-item label="版本内容" v-if="versionInfo.version != null">
          <el-input v-model="versionInfo.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="$router.push({name: 'FileVersion', params: {fileId: fileInfo.id}})"
            type="primary"
            size="mini">
            查看历史版本
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="updateFile"
            type="primary"
            size="mini">
            贡献
          </el-button>
        </el-form-item>
      </el-form>
    </el-aside>
    <el-main>
      <download-view :id="fileInfo.id" v-if="type === 4" :version="versionInfo.version" :applyId="applyId"></download-view>
      <image-view :id="fileInfo.id" v-if="type === 3" :version="versionInfo.version" :applyId="applyId"></image-view>
      <markdown-view :id="fileInfo.id" v-if="type === 2" :version="versionInfo.version" :applyId="applyId"></markdown-view>
      <pdf-view :id="fileInfo.id" v-if="type === 1" :version="versionInfo.version" :applyId="applyId"></pdf-view>
    </el-main>
  </el-container>
</template>

<script>
  import DownloadView from '../../../components/File/FileView/DownloadView'
  import ImageView from '../../../components/File/FileView/ImageView'
  import MarkdownView from '../../../components/File/FileView/MarkdownView'
  import PdfView from '../../../components/File/FileView/PdfView'
  export default {
    name: 'index',
    components: { PdfView, MarkdownView, ImageView, DownloadView },
    data: function() {
      return {
        fileInfo: {
          id: null,
          fileName: "123",
          fileType: 'markdown',
          tagList: [],
        },
        versionInfo: {
          version: null,
          content: null,
        },
        applyId: null,
      }
    },
    computed: {
      type() {
        switch (this.fileInfo.fileType.toLowerCase()) {
          case 'pdf':return 1;
          case 'markdown': return 2;
          case 'png':
          case 'jpg':
          case 'jpeg':return 3;
          default: return 4;
        }
      }
    },
    created() {
      this.fileInfo = this.$route.params.fileInfo;
      this.versionInfo.version = this.$route.params.version;
      this.applyId = this.$route.params.applyId;
      if (this.fileInfo == null || this.fileInfo.id == null) {
        this.$router.push({name: "FilePage"})
      }
      this.initFileInfo()
    },
    methods: {
      initFileInfo() {
        this.$api.fileInfo(this.fileInfo.id).then(res => {
          this.fileInfo = res;
        })
      },
      updateFile() {
        if (this.type != 2) {
          this.$router.push({name: "FileAdd", params: {update: true, fileId: this.fileInfo.id}});
        } else {
          this.$router.push({name: "FileEdit", params: {update: true, fileId: this.fileInfo.id}});
        }
      }
    }
  }
</script>

<style scoped>

</style>
